<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <form id="addForm">
        规格名称：<input type="text" name="specName" placeholder="规格名称" id="specName"><br><br>
        <!-- 规格选项 -->
        <div class="btn-group">
            <button type="button" class="btn btn-default" title="新建" onclick="addTr()" ><i class="fa fa-file-o"></i> 新增规格选项</button>

        </div>

        <table class="table table-bordered table-striped table-hover dataTable">
            <thead>
                <tr>
                    <th class="sorting">规格选项</th>
                    <th class="sorting">排序</th>
                    <th class="sorting">操作</th>
                </tr>
            </thead>
        </table>
        <table class="table table-bordered table-striped table-hover dataTable" id="tableId">
            <tr>
                <td>
                    <input  class="form-control" placeholder="规格选项" name="optionName">
                </td>
                <td>
                    <input  class="form-control" placeholder="排序" name="orders">
                </td>
                <td>
                    <button type="button" class="btn btn-default" title="删除" onclick="delTr(this)"><i class="fa fa-trash-o"></i> 删除</button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
<script>
    //增加
    function addTr(){
        $("#tableId").append('<tr><td><input  class="form-control" placeholder="规格选项" name="optionName"></td><td>' +
            '<input  class="form-control" placeholder="排序" name="orders"></td><td><button type="button" class="btn btn-default" ' +
            'title="删除" onclick="delTr(this)"><i class="fa fa-trash-o"></i> 删除</button></td></tr>');
    }

    //删除
    function delTr(obj){
        var tr = obj.parentNode.parentNode;
        tr.remove();
    }

</script>